<style lang="scss">
    .poolmanage-list {
        padding: 0 .24rem;
        li {
            border-bottom: 1px solid #EEEEEE;
            height: 1.44rem;
            padding: .24rem 0;
            &.not-active{
                opacity: 0.4;
            }
        } 
        .basic-info {
            float: left;
            .mintui {
                font-size: .26rem;
                color: #1C93FB;
            }
            .name-rate {
                font-size: .32rem;
                height: .48rem;
                line-height: .48rem;
                .name {
                    margin-right: .24rem;
                }
            }
            .contact {
                font-size: .24rem;
                height: .48rem;
                line-height: .48rem;
                color: #CCCCCC;
            }
        }
        .position {
            float: right;
            margin-top: .2rem;
            .mint-button {
                height: .54rem;
                border-radius: .05rem;
                font-size: .18rem;
            }
        }
    }
</style>

<template>
    <div class="page-wrapper">
        <mt-header fixed title="授权管理">
            <mt-button icon="back" slot="left" @click="$router.push('/homepage')"></mt-button>
            <mt-button icon="add" slot="right" @click="addPoolManagerModal.visible = true"></mt-button>
        </mt-header>
        <ul class="poolmanage-list">
            <li :class="['clearfix', n < 4 ? '' : 'not-active']"
                v-for="n in [1,2,3]" 
                :key="n">
                <div class="avatar">
                    <img src="~assets/img/avator.png" alt="placer">
                    <img v-if="false" src="~assets/img/home-logo.png" alt="avatar"/>
                </div>
                <div class="basic-info">
                    <div class="name-rate">
                        <span class="name">方文田</span>
                    </div>
                    <div class="contact">
                        <span>13946836132</span>
                    </div>
                </div>
                <div class="position">
                    <mt-button type="primary" size="small">泳池经理</mt-button>
                </div>
            </li>
        </ul>
        <AddPoolManagerModal v-model="addPoolManagerModal.visible"></AddPoolManagerModal>
    </div>
</template>

<script>
    import AddPoolManagerModal from './AddPoolManagerModal.vue'
    export default {
        components: {
            AddPoolManagerModal,
        },
        data() {
            return {
                value5: 1.7,
                addPoolManagerModal: {
                    visible: false,
                }
            }
        }
    }
</script>
